<!DOCTYPE html>

<!--[if lte IE 9]>
<html class="lte9 no-js demo">
<![endif]-->

<!--[if gt IE 9]><!-->
<html class="demo js cssanimations">
<!--<![endif]-->

<head>
    <title>资源详情</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="renderer" content="webkit">
    <meta name="description" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="alternate icon" type="image/png" href="http://s.amazeui.org/assets/2.x/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="http://s.amazeui.org/assets/2.x/i/app-icon72x72@2x.png">

    <link rel="stylesheet" href="http://s.amazeui.org/assets/2.x/css/amazeui.min.css?v=ibj1fy0x">
    <link rel="stylesheet" href="http://s.amazeui.org/assets/2.x/css/amaze.min.css?v=ibj1fy0x">
    <link rel="canonical" href="http://amazeui.org?_ver=2.x">

    <script src="http://s.amazeui.org/assets/2.x/js/jquery.min.js?v=ibj1fy0x"></script>
    <script src="http://s.amazeui.org/assets/2.x/js/handlebars.min.js?v=ibj1fy0x"></script>
    <script src="http://s.amazeui.org/assets/2.x/js/amazeui.min.js?v=ibj1fy0x"></script>

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <script type="text/javascript">

        var shareUrl = window.location.href.split('#')[0];

        // 进行第一次编码
        var shareUrlEncode = encodeURIComponent(shareUrl);
        // 进行第二次编码
        shareUrlEncode = encodeURIComponent(shareUrlEncode);

        // alert(shareUrlEncode);

        var wxConfig = {};

        // 在DOM加载完成时运行的代码
        $(document).ready(function () {
            // 在这里写你的代码...
        })

        //        wx.checkJsApi({
        //            jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        //            success: function (res) {
        //                // 以键值对的形式返回，可用的api值true，不可用为false
        //                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //            }
        //        });

        $.ajax({
            async: false,
            type: "POST",
            url: "${ctxPath}/weixin/signature",
            data: "shareUrl=" + shareUrlEncode,
            dataType: 'json',
            success: function (result) {
                // alert(result);
                // $("#modalContent").html(msg);
                // $("#your-modal").modal();
                // wxConfig = $.parseJSON(result);
                wxConfig = result;
                // alert(wxConfig.appId);
            }
        });

        // 微信配置
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: wxConfig.appId, // 必填，公众号的唯一标识
            timestamp: wxConfig.timestamp, // 必填，生成签名的时间戳
            nonceStr: wxConfig.nonceStr, // 必填，生成签名的随机串
            signature: wxConfig.signature, // 必填，签名，见附录1
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
        // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
        // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.ready(function () {

            // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
            wx.onMenuShareTimeline({
                title: '${resource.intro}', // 分享标题
                link: shareUrl, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: '${resource.intro}', // 分享标题
                desc: '${resource.intro}', // 分享描述
                link: shareUrl, // 分享链接
                imgUrl: '', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            // 获取“分享到QQ”按钮点击状态及自定义分享内容接口
            wx.onMenuShareQQ({
                title: '${resource.intro}', // 分享标题
                desc: '${resource.intro}', // 分享描述
                link: shareUrl, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
            wx.onMenuShareWeibo({
                title: '${resource.intro}', // 分享标题
                desc: '${resource.intro}', // 分享描述
                link: shareUrl, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

        });

        function shareTimeline() {
            // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
            wx.onMenuShareTimeline({
                title: '${resource.intro}', // 分享标题
                link: shareUrl, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        }

        function shareAppMessage() {
            // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: '${resource.intro}', // 分享标题
                desc: '${resource.intro}', // 分享描述
                link: shareUrl, // 分享链接
                imgUrl: '', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        }

        function join() {
            var resourceId = $("#resourceId").val();
            var raId = $("#raId").val();
            var telephone = $("#telephone").val();
            var answer = $("#answer").val();

            $.ajax({
                type: "POST",
                url: "${ctxPath}/resource/join",
                data: "resourceId=" + resourceId + "&raId=" + raId + "&telephone=" + telephone + "&answer=" + answer,
                success: function (msg) {
                    alert(msg);
                    // $("#modalContent").html(msg);
                    // $("#your-modal").modal();
                }
            });

            $("#telephone").val("");
            $("#answer").val("");
        }

    </script>

</head>

<body>

<div class="page pg-demo">

    <header data-am-widget="header" class="am-header am-header-default">
        <h1 class="am-header-title">资源详情</h1>
    </header>

    <nav data-am-widget="menu" class="am-menu  am-menu-offcanvas1" data-am-menu-offcanvas>
        <a href="javascript: void(0)" class="am-menu-toggle">
            <i class="am-menu-toggle-icon am-icon-bars"></i>
        </a>

        <div class="am-offcanvas">
            <div class="am-offcanvas-bar">
                <ul class="am-menu-nav am-avg-sm-1">
                    <li class="">
                        <a class="" href="javascript:void(0);" onclick="shareTimeline()">分享到朋友圈</a>
                    </li>
                    <li class="">
                        <a class="" href="javascript:void(0);" onclick="shareAppMessage()">发送给朋友</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <figure data-am-widget="figure" class="am am-figure am-figure-default" data-am-figure="{ pureview: 'true' }">
        <img src="http://7xk4um.com2.z0.glb.qiniucdn.com/${resource.path}" data-rel="http://7xk4um.com2.z0.glb.qiniucdn.com/${resource.path}" alt="收益：${resource.joinReward}元，答案：${resource.raIntro}"/>
        <figcaption class="am-figure-capition-btm">${resource.intro}</figcaption>
    </figure>

    <br/>

    <form class="am-form" name="joinForm">
        <fieldset>
            <legend>获取收益</legend>

            <input type="hidden" id="resourceId" name="resourceId" value="${resource.id}">
            <input type="hidden" id="raId" name="raId" value="${resource.raId}">

            <div class="am-form-group">
                <label for="telephone">手机号码</label>
                <input type="text" class="" id="telephone" name="telephone" placeholder="请输入手机号码">
                <!-- <button type="button" class="am-btn am-btn-default">获取短信验证码</button> -->
            </div>

            <div class="am-form-group">
                <label for="answer">图片中问题的答案</label>
                <input type="text" class="" id="answer" name="answer" placeholder="请输入图片中问题的答案">
            </div>

            <p>
                <input type="button" value="提交" onclick="join()" class="am-btn am-btn-default">
            </p>
        </fieldset>
    </form>

    <div class="am-modal am-modal-no-btn" tabindex="-1" id="your-modal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd"><!-- Modal 标题 -->
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd" id="modalContent">
                Modal 内容。
            </div>
        </div>
    </div>

</div>

</body>

</html>
